<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 组件自定义事件</title>
</head>
<style>
    .template {
        margin: 5% 10%;
    }
</style>
<body>
<div id="app">
    <div class="template">
        <html-component1
                v-bind:num1="number"
                v-bind:num2="number"
                v-on:number-add-100="numberAdd"
                v-bind:number.sync="number"
        ></html-component1>
    </div>
</div>

<script src="../js/vue.js"></script>
<script>

    const message = {
        number : 10000,
    };

    const vue_child = {
        data() {
            return {
                message: 'vue_child局部组件',
            }
        },
        template: `
          <h4>
              <div>
                    {{num1}}<br>
                    <button v-on:click="numAdd1">自定义事件子调用父方法</button><br>
                    {{num2}}<br>
                    <button v-on:click="numAdd2">自定义事件强制同步</button>
              </div>
          </h4>
        `,
        props: {
            num1: Number,
            num2: Number
        },
        methods: {
            numAdd1 : function (){
                return this.$emit('number-add-100', this.num1 + 100);
            },
            numAdd2 : function (){
                return this.$emit('update:number', this.num2 + 20);
            },
        }
    }

    const demo = new Vue({
        el: '#app',
        data: message,
        methods: {
            numberAdd(number){
                this.number = number;
            }
        },
        computed: {},
        components: {
            'html-component1': vue_child,
        },
    });
</script>
</body>
</html>